<template>
     <div class='table-info'>
      <div class='table-wrap'>
        <el-table id="myTable" :data='arrayTableDataGet' border  size="large">
          <el-table-column align="center" prop='stageName' label='阶段名称' width="260px"
                           show-overflow-tooltip></el-table-column>
          <el-table-column align="center" prop='courseName' label='课程名' min-width="260px"
           show-overflow-tooltip></el-table-column>
     
          <el-table-column align="center" prop='bkTeaName' width="130px" label='上课老师'></el-table-column>
          <el-table-column align="center" prop='claAttendCount' width="160px" label='上课考勤'>
            <template #default="{row}">
              <span class="sign-link" @click="showSignHis(row,'0')">
              {{ row.claAttendCount }}/{{ row.claAttendShouldCount }}
                <span v-if="row.wheClaFullAttend === 0">（全勤）</span>
              </span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop='coachAttendCount' width="160px" label='辅导考勤'>
            <template #default="{row}">
              <span class="sign-link" @click="showSignHis(row,'1')">
              {{ row.coachAttendCount }}/{{ row.coachAttendShouldCount }}
                <span v-if="row.wheCoachFullAttend === 0">（全勤）</span>
              </span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop='bkAvgScore' width="100px" label='班课成绩'></el-table-column>
          <el-table-column align="center" prop='stageAvgScore' width="100px" label='阶段成绩'></el-table-column>
        </el-table>
      </div>
    </div>


    <el-button class='xls-export' link :icon='Download' @click="exportExcel">
          <span>表格导出</span>
        </el-button>
  
</template>




<script setup>
import { ref } from "vue" 
import {Download} from '@element-plus/icons-vue';

import { exportToExcel } from '@/utils/Export2Excel'

import useUserStore from '@/store/modules/user'


console.log(useUserStore().roles);

const arrayTableDataGet=ref([

  {

    archId:"1687000081762484224",
    archName: "Web前端全科班",
    bkTeaName:"赵子华",
    bkAvgScore: "无",
    bkId: "",
    claAttendCount: 0,
    claAttendShouldCount: 0,
    coachAttendCount: 0,
    coachAttendShouldCount: 0,
    courseId: "1687001019453669376",
    courseName: "数字影像合成（photoshop）",
    isEmpty: true,
    isFirst: true,
    stageAvgScore: "无",
    stageId: "1687001019390754816",
    stageName: "Web前端基础",
    wheClaFullAttend: 1,
    wheCoachFullAttend: 1,

  },
  {

archId:"1687000081762484224",
archName: "Web前端全科班",
bkAvgScore: "无",
bkId: "",
claAttendCount: 0,
claAttendShouldCount: 0,
coachAttendCount: 0,
coachAttendShouldCount: 0,
courseId: "1687001019453669376",
courseName: "数字影像合成（photoshop）",
isEmpty: true,
isFirst: true,
stageAvgScore: "无",
stageId: "1687001019390754816",
stageName: "Web前端基础",
wheClaFullAttend: 1,
wheCoachFullAttend: 1,

}
])


const exportExcel=()=>{
  exportToExcel('#myTable', '导出名称')
  console.log(666);
}


</script>

<style lang="scss" scoped>
  .table-info {
    padding: 40px;

    .table-wrap {

      :deep(.el-table) {
        font-size: 16px;

        thead .el-table__cell {
          padding: 14px 0;
          background-color: rgba(245, 247, 250, 1);
        }

        .el-table__row:hover {
          td.el-table__cell {
            background-color: transparent;

          }
        }
      }

      .learn-time-box {
        display: flex;
        justify-content: center;
        align-items: center;

        .re-tag {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 32px;
          height: 18px;
          margin-left: 5px;
          font-size: 12px;
          color: #E6A23C;
          border: 1px solid #E6A23C;
          background-color: #FDF6EC;
          border-radius: 3px;
        }
      }


      .sign-link {
        font-size: 16px;
        color: #2A82E4;
        cursor: pointer;
      }
    }
  }
</style>